import {Icon, Searchbar} from "react-native-paper";
import {TouchableOpacity, View} from "react-native";
import React from "react";

interface props {
    search: string,
    setSearch: React.Dispatch<React.SetStateAction<string>>,
}

export const ScrollableBar = ({search, setSearch}: props, props: React.ComponentProps<any>) => {
    return (
        <View {...props}
              style={{
                  flexDirection: `row`,
                  marginVertical: 8,
                  paddingHorizontal: 14,
                  height: 40,
                  justifyContent: "space-between"
              }}>
            <Searchbar placeholder={`Поиск`}
                       elevation={1}
                       value={search}
                       onChangeText={text => setSearch(text)}
                       style={{
                           width: `81%`,
                           height: 40,
                           backgroundColor: `#FFF`,
                       }}
                       inputStyle={{
                           position: `relative`,
                           bottom: 7,
                           justifyContent: "center",
                           alignItems: "center"
                       }}/>
            <View children={<TouchableOpacity children={<Icon source={`tune-variant`}
                                                              size={21}
                                                              color={`black`}/>}/>}
                  style={{
                      backgroundColor: `#FFF`,
                      justifyContent: `center`,
                      alignItems: `center`,
                      borderRadius: 100,
                      padding: 10,
                      elevation: 4
                  }}/>
        </View>
    );
};